<template>
  <div>

    <el-card style="width: 65%;margin: 20px auto;">
      <el-input placeholder="请输入关键词" v-model="InPut" style="width: 30%" clearable>
      </el-input>
      <el-button icon="el-icon-search" type="info" plain @click="search()">搜索</el-button>

      <div class="manage" style="float: right;">
        <el-button plain icon="el-icon-circle-plus-outline" v-model="Addview" @click="Addview = true">入职</el-button>
        <el-button plain icon="el-icon-remove" @click="UserfulChange()">离职</el-button>
        <el-button plain type="danger" icon="el-icon-delete" @click="Delete()">删除</el-button>
      </div>
    </el-card>

    <el-card style="width: 90%;margin: 20px auto;">
      <el-table :data="filterData" max-height="320" @select="handleSelectionChange" @select-all="handleSelectAll">
        <el-table-column fixed="left" label="全选" width="50" type="selection">
        </el-table-column>
        <el-table-column fixed prop="id" label="工号">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>

        <el-table-column prop="date" label="日期" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>

          </template>
        </el-table-column>
        <el-table-column prop="company" label="公司">
        </el-table-column>
        <el-table-column prop="role" label="工种" width="120">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="100">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="Clickc(scope.row)">编辑</el-button>
            <el-button @click="remove(scope.row.id)" type="text" size="small" style="color: red">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>


    <el-dialog title="信息修改单" :visible.sync="dialogVisible" width="30%">
      <div>
        新名称<br><br><el-input placeholder="如需修改请修改为新名称" v-model="Name"></el-input><br><br>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click=" dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="新员工信息" :visible.sync="Addview" width="500px">
      <div style="text-align: center;">
        <div class="sp">
          <span>工人工号:
            <el-input style="width: 300px" v-model="newWorker.id" placeholder="工号长度及账号密码"></el-input>
          </span><br><br>
        </div>
        <div class="sp">
          <span>工人姓名:
            <el-input style="width: 300px" v-model="newWorker.name" placeholder="新员工名称"></el-input>
          </span><br><br>
        </div>
        <div class="sp">
          <span>工人性别:
            <el-input style="width: 300px" v-model="newWorker.sex" placeholder="男（女）"></el-input>
          </span><br><br>

        </div>
        <div class="sp">
          <span>联系方式:
            <el-input style="width: 300px" v-model="newWorker.iphone" placeholder="电话号码"></el-input>
          </span><br><br>
        </div>
        <div class="sp">
          <span>工人类型:
            <el-input style="width: 300px" v-model="newWorker.role" placeholder="木工/建筑电工/瓦工/架子工..."></el-input>
          </span><br><br>
        </div>

        <div class="sp">
          <span>所属企业:
            <el-input style="width: 300px" v-model="newWorker.company" placeholder="**省**市**区**企业"></el-input>
          </span><br><br>
        </div>
        <div class="sp">
          <span>账号密码:
            <el-input style="width: 300px" v-model="user.password" placeholder="默认与工会相同"></el-input>
          </span><br><br>
        </div>

        <br><br>
      </div>

      <div class="submit-buttons" style="text-align: center;">
        <el-button type="primary" @click="Addview = false, useradd(), workeradd()">确定</el-button>
        <el-button @click="Addview = false">取消</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<script>
import Topbar from "@/components/Topbar.vue";

export default {
  methods: {

    Delete() {

      for (let i = 0; i < this.checked.length; i++) {
        this.$axios.post('http://localhost:8090/worker/remove', this.checked[i], {
          headers: {
            'Content-Type': 'application/json',
          }
        })
          .then(response => {
            console.log(this.checked);

          })
          .catch(error => {
            console.error(error);

            // 处理出错情况，例如显示错误信息等等
          });
      }
      this.checked = [];
      location.reload();
      //全选的删除
    },
    UserfulChange() {
      //console.log(this.checked);在这个位置是正常的，其他但是undefine,this.$axios.post().then(response => { ... }) 中的箭头函数会改变 this 的上下文，因此可能会导致 this.checked 变成 undefined
      for (let i = 0; i < this.checked.length; i++) {
        console.log(1333333);
        this.$axios.post('http://localhost:8090/user/useful', this.checked[i], {
          headers: {
            'Content-Type': 'application/json',
          }
        })
          .then(response => {

          })
          .catch(error => {
            console.error(error);

            // 处理出错情况，例如显示错误信息等等
          });
      }
      this.checked = [];

      //全选的删除
    },
    handleSelectAll(value) {


      this.checked = [];
      this.checkednum = value.length - 1;

      value.forEach(item => {
        this.checked.push(item.id); // 将选中行的id添加到checked数组中
      });

      /**
       for
       {
        console.log(636);
this.checked.push(value[this.checkednum].id);
        this.checkednum++;
      }不理解为什么不运行呢 length拼写错误，legend
       */

    },

    handleSelectionChange(value) {


      this.checked.push(value[this.checkednum].id);
      this.checkednum++;

    },

    useradd() {
      this.user.userId = this.newWorker.id;

      this.$axios.post('http://localhost:8090/user/add', this.user, {
        headers: {
          'Content-Type': 'application/json',
        }
      })
        .then(response => {
          console.log('success add');


        })
        .catch(error => {
          console.error(error);
          // 处理出错情况，例如显示错误信息等等
        });
    },
    workeradd() {

      this.$axios.post('http://localhost:8090/worker/add', this.newWorker, {
        headers: {
          'Content-Type': 'application/json',
        }
      })
        .then(response => {
          location.reload();
        })
        .catch(error => {
          console.error(error);
          // 处理出错情况，例如显示错误信息等等
        });
    },
    remove(id) {
      this.$axios.post('http://localhost:8090/worker/remove', id, {
        headers: {
          'Content-Type': 'application/json',
        }
      })
        .then(response => {

          location.reload();
        })
        .catch(error => {
          console.error(error);

        });
    },
    Clickc(row) {
      this.dialogVisible = true;
      this.newWorker = row;

    },

    edit() {
      console.log(this.newWorker);
      this.newWorker.name = this.Name;
      this.$axios.post('http://localhost:8090/worker/modify', this.newWorker, {

      })
        .then(response => {
          if (response.data) {
            alert("操作成功");
            this.dialogVisible = false;
            location.reload();
          }
        })
        .catch(error => {
          console.error(error);
          // 处理出错情况，例如显示错误信息等等
        });

    },
    search() {
      this.searchText = this.InPut;

    },

  },
  data() {
    return {
      u: '',
      searchText: '',
      checkAll: false,
      Addview: false,
      checkednum: 0,
      checked: [
        {
          id: '',
        }


      ],
      isIndeterminate: true,
      Name: '',
      InPut: '',
      dialogVisible: false,
      newWorker: {
        id: '',
        name: '',
        phone: '',
        company: '',
        sex: '',
        role: '',
        date: '',
      },
      user: {
        userId: '',
        password: '',
        useful: 1,
      },
      worker: [{
        id: '',
        name: '',
        phone: '',
        company: '',
        sex: '',
        role: '',
        date: '',
      }]

    }
  },
  computed: {
    filterData() {
      const searchText = this.searchText.trim().toLowerCase();//大写转小写
      if (!searchText) {
        return this.worker;
      }
      else {
        return this.worker.filter((item) => {

          return (
            item.date.toLowerCase().includes(searchText) ||
            item.id.toLowerCase().includes(searchText) ||
            item.name.toLowerCase().includes(searchText)
          );

        })
      }
    },
  },
  mounted() {

    this.$axios.post('http://localhost:8090/user/get', null, {
      headers: {
        'Content-Type': 'application/json',
      }
    })
      .then(response => {
        this.worker = response.data;
        this.worker.sort((a, b) => a.id - b.id);
        console.log(this.worker);
        // 请求返回数据后，调用 filterData 方法进行数据过滤

      })
      .catch(error => {
        console.error(error);
        // 处理出错情况，例如显示错误信息等等
      });

  },
  name: "role1Person",
  components: { Topbar },





}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  margin-left: 200px;
  height: 500px;
  width: 70%;
}

.content {
  width: 80%;
  text-align: center;
  align-content: center
}
</style>